<template>
   <div v-show="show" class="toTop-container" @click="handleClick">
       Top
   </div>
</template>

<script>
export default {
    name:'ToTop',
    data(){
        return{
            show:false
        }
    },
    created(){
        //事件总线上监听mainScroll事件
        this.$bus.$on('mainScroll',this.handleScroll)
    },
    destroyed(){
        this.$bus.$off('mainScroll',this.handleScroll);
    },
    methods:{
        handleClick(){
            this.$bus.$emit('setMainScroll',0)
        },
        handleScroll(mainContainer){
            if(!mainContainer){
                this.show = false;
                return;
            }

            this.mainContainer = mainContainer
            const range = 500;
            if(mainContainer.scrollTop>range){
                this.show = true;
            }else{
                this.show = false;
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.toTop-container{
    position:fixed;
    bottom:50px;
    right:50px;
    width:50px;
    height:50px;
    box-sizing: border-box;
    border-radius: 50%;

    line-height: 50px;
    text-align: center;
    color:#fff;
    background-color: @primary;
    cursor:pointer;

}
</style>